<template>
	<view class="login-wrapper">
		<view class="login-title">
			<view class="login-title-txt">
				修改登录密码！
			</view>
			<text class="login-title-small-txt">修改之后下次登录就可以使用新密码登录</text>
		</view>
		<view class="login-form">
			<view class="form-item flex-c">
				<text class="form-item-lable">手机号</text>
				<input type="number" v-model="phone" class="form-item-input" placeholder="输入手机号" />
			</view>
			<view class="form-item flex-c">
				<text class="form-item-lable">验证码</text>
				<input type="number" v-model="verificationCode" class="form-item-input" placeholder="输入短信验证码" />
				<text class="get-code-btn" @click="getCode">{{codeTxt}}</text>
			</view>
			
			<view class="form-item flex-c">
				<text class="form-item-lable">密码</text>
				<input type="password" v-model="loginPassword" class="form-item-input" placeholder="输入新密码" />
			</view>
			<view class="form-item flex-c">
				<text class="form-item-lable">确认密码</text>
				<input type="password" v-model="confirmLoginPassword" class="form-item-input" placeholder="输入确认密码" /> 
			</view>
			
			<view class="agreement flex-c">
				<checkbox-group @change="">
					<label class="flex-c">
						<checkbox value="cb" checked="true" color="#EB5883" style="transform:scale(0.9)" />我已阅读并同意
					</label> 
				</checkbox-group>
				<text>《注册协议》</text>
				<text>《隐私政策》</text>
			</view>
			
			<button class="login-btn" @click="saveHandle">保存</button> 
		</view>  
	</view>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { onReady, onUnload } from '@dcloudio/uni-app'

import { getCodeLoadingPassword, updateLoadingPassword } from '@/http/my' 

export default defineComponent({
	setup() {
		const title = ref('Hello')
		const timer = ref()
		const state = reactive({
			customRules: {
				name: {
					rules: [{
						required: true,
						errorMessage: '姓名不能为空'
					}]
				},
				age: {
					rules: [{
						required: true,
						errorMessage: '年龄不能为空'
					}]
				},
			},
			second: 60,
			codeTxt: '获取验证码',
			loginPassword: '', 
			confirmLoginPassword: '',
			verificationCode: '',
			phone: ''
		})
		
		const getCode = async () => { // 13139278220
			if(state.codeTxt !== '获取验证码') return;
			if(!/^1[356789]\d{9}$/.test(state.phone)) {
				uni.showToast({
					icon: 'none',
					title: '输入正确的手机号'
				})
				return
			}
			
			let res = await getCodeLoadingPassword(state.phone) 
			console.log(res);
			if(res.code === 0) {
				uni.showToast({
					icon: 'success',
					title: '验证码已发送'
				})
				timer.value = setInterval(() => {
					if(state.second <= 0) {
						clearInterval(timer.value)
						state.second = 60
						state.codeTxt = '获取验证码'
						return
					}
					state.second --
					state.codeTxt = `${state.second}后重新发送` 
				}, 1000)
			} else {
				uni.showToast({
					icon: 'none',
					title: res.msg
				})
			}
			
		}
		onUnload(() => {
		   clearInterval(timer.value)
		})
		
		const saveHandle = async () => {
			if(!/^1[356789]\d{9}$/.test(state.phone)) {
				uni.showToast({
					icon: 'none',
					title: '输入正确的手机号'
				})
				return
			}
			if(!/^\d{6}$/.test(state.verificationCode)) {
				uni.showToast({
					icon: 'none',
					title: '输入6位验证码'
				})
				return
			}
			if(!state.loginPassword) {
				uni.showToast({
					icon: 'none',
					title: '输入新密码'
				})
				return
			}
			if(state.loginPassword !== state.confirmLoginPassword) {
				uni.showToast({
					icon: 'none',
					title: '两次密码不一致'
				}) 
				return
			}
			
			let res  = await updateLoadingPassword({
				loginPassword: state.loginPassword,
				confirmLoginPassword: state.confirmLoginPassword,
				phone: state.phone,
				verificationCode: state.verificationCode
			})
			if(res.code === 0) {
				uni.showToast({
					icon: 'success',
					title: '修改成功',
					success() {
						uni.navigateBack()
					}
				})
			} else {
				uni.showToast({
					icon: 'none',
					title: '修改失败'
				})
			} 
		}
		return {
		  title,
		  getCode,
		  saveHandle,
		  ...toRefs(state)
		}
	}
})
</script>

<style lang="scss" scoped>
.login-wrapper{
	padding: 40rpx 0;
	.login-title{
		margin-left: 24rpx;
		.login-title-txt{
			font-size: 48rpx;
			font-weight: 700;
		}
		.login-title-small-txt{
			font-size: 28rpx;
			color: #999;
		}
	}
	.login-form{
		margin: 60rpx ;
		.form-item{
			height: 90rpx;
			background-color: #f0f0f0;
			border-radius: 45rpx;
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			&:last-child{
				margin-bottom: 0rpx;
			}
			.form-item-lable{
				font-size: 32rpx;
				color: #666;
				margin-right: 20rpx;
			}
			.form-item-input{
				flex: 1;
				height: 32rpx;
				font-size: 32rpx;
			}
		} 
		.login-btn{
			height: 90rpx;
			background-color: $theme-primary-color;
			margin-top: 40rpx;
			border-radius: 45rpx;
			color: #fff;
			line-height: 90rpx;
			font-size: 34rpx;
		}
	} 
	.agreement{
		margin-top: 100rpx;
		font-size: 26rpx;
		color: #666;
		justify-content: center;
	}
}	
</style>
